<template>
    <div class="home">
        <!-- <div class="map">
            <Map :markerData="markerData"></Map>
        </div> -->
        <div class="top">
            <Top></Top>
        </div>
        <div class="center">
            <Center :centerDataOne="centerDataOne" :centerDataTwo="centerDataTwo"></Center>
        </div>
        <div class="left">
            <div class="weather">
                <Weather></Weather>
            </div>
            <div class="info">
                <div class="serch">
                    <div class="serch_2">
                        <div class="select2" @click="showSelect1 = !showSelect1">
                            <div class="text_2">
                                {{ selectValueOne }}
                            </div>
                            <div class="img_2">
                                <img v-if="!showSelect1" src="@/assets/home/down.png" alt="">
                                <img v-else src="@/assets/home/up.png" alt="">
                            </div>
                        </div>
                        <div class="selectList" v-show="showSelect1">
                            <div @click="changedSelectOne(item)" v-for="(item, key) in dataListSelectOne" :key="key">
                                {{ item }}</div>
                        </div>
                    </div>
                </div>
                <div class="info_m">
                    <div class="info_m_t">
                        <div class="img">
                            <img src="" alt="">
                        </div>
                        <div class="text">
                            <div class="text1" v-for="(item, index) in dataListTwo.objTwo.infoItem" :key="index">
                                <p class="p1">{{ item.type }}：{{ item.name }}</p>
                                <p class="p2">{{ item.TEL }}：{{ item.TELNUMBER }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="info_m_2">
                        <div class="listZu" v-for="(item, index) in dataListTwo.objTwo.infoList" :key="index">
                            {{ item }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="jiangkong">
                <Title :title="'实时监控'"></Title>
            </div>
            <div class="serch_2">
                <div class="select2" @click="showSelect2 = !showSelect2">
                    <div class="text_2">
                        {{ selectValue }}
                    </div>
                    <div class="img_2">
                        <img v-if="!showSelect2" src="@/assets/home/down.png" alt="">
                        <img v-else src="@/assets/home/up.png" alt="">
                    </div>
                </div>
                <div class="selectList" v-show="showSelect2">
                    <div class="selectListItem" @click="changedSelect(item)" v-for="(item, key) in dataListSelect"
                        :key="key">
                        {{ item }}</div>
                </div>
            </div>
            <div class="video">
                <video src=""></video>
            </div>
        </div>

        <div class="right">

        </div>

    </div>
</template>
<script setup>
import { ref, computed, reactive } from 'vue'
import Center from '@/pages/compontents/center/index.vue'
import Weather from '@/components/weather.vue';
import Top from '@/components/top/index.vue'
import Title from '@/pages/compontents/title/index.vue'
// import { color } from 'echarts'
// const input3 = ref('')
// 左一侧数据

let objC1 = {
    dataList: [
        {
            name: '雨量采集器',
            img: ''
        },
        {
            name: '压力传感器',
            img: ''
        },
        {
            name: '摄像头',
            img: ''
        }
    ]
}
let centerDataOne = reactive({ objC1 })
let objC2 = {
    dataList: [
        {
            name: '救援人员',
            img: '',
        },
        {
            name: '救援车辆',
            img: '',
        },
        {
            name: '救援物资',
            img: '',
        },
        {
            name: '重点人员',
            img: '',
        }
    ]
}
let centerDataTwo = reactive({ objC2 })
let objTwo = {
    infoItem: [
        {
            type: '管理员',
            name: '李四',
            TEL: "TEL",
            TELNUMBER: '16899999999'
        },
        {
            type: '值班员',
            name: '李四',
            TEL: "TEL",
            TELNUMBER: '16899999999'
        },
    ],
    infoList: [
        "章西组", "章西组", "章西组", "章西组", "章西组", "章西组", "章西组", "章西组", "章西组",
        "章西组"
    ]
}
let selectValueOne = ref('村组信息')
let showSelect1 = ref(false)
let dataListSelectOne = ref([
    '村组信息'
])
function changedSelectOne(item) {
    selectValueOne.value = item
    showSelect1.value = false
}
let dataListTwo = reactive({ objTwo })
let showSelect2 = ref(false)
let selectValue = ref('九号摄像头')
let dataListSelect = ref(['九号摄像头', '十号摄像头', '十号摄像头',
    '十号摄像头', '十号摄像头', '十号摄像头', '十号摄像头', '十号摄像头'])

function changedSelect(item) {
    selectValue.value = item
    showSelect2.value = false
}
</script>
<style scoped src="./index.css"></style>